<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:tree&gt;</code> allows the developers to have full control over the markup of a tree 
			hierarchy by declaring the appropriate JSF components or HTML elements in the markup. The <code>&lt;o:tree&gt;</code> 
			does namely not render any HTML by itself.
		</p>
		<p>
			Note that the left menu of this showcase application is also using an <code>&lt;o:tree&gt;</code> which is
			dynamically populated in an application scoped bean based on the structure of the webapp's <code>/showcase</code> 
			folder. See also 
			<a href="http://code.google.com/p/omnifaces-showcase/source/browse/src/org/omnifaces/showcase/App.java"><code>App</code> source code</a>,
			<a href="http://code.google.com/p/omnifaces-showcase/source/browse/src/org/omnifaces/showcase/Page.java"><code>Page</code> source code</a> and
			<a href="http://code.google.com/p/omnifaces-showcase/source/browse/WebContent/WEB-INF/templates/layout.xhtml"><code>layout.xhtml</code> source code</a>.
			Also note that <code>Page</code> extends <code>ListTreeModel</code>, this is not necessary per se, 
			but it eases accessing the parent and sister pages in EL as is done in the navigation menu here above,
			and the siblings as is done in the quick navigation buttons right above. 
			See also
			<a href="http://code.google.com/p/omnifaces-showcase/source/browse/WebContent/WEB-INF/templates/showcase.xhtml"><code>showcase.xhtml</code> source code</a>.
		</p>
		<p>
			In the below editable tree example, all input values are required. Clear some of them and then submit to see
			proper validation message handling. If all values are valid, then the static tree will also be updated with
			submitted values. You can also dynamically add/remove nodes.
		</p>
	</ui:define>

	<ui:define name="demo">
		<h3>Static tree</h3>
		<h:panelGroup id="staticTree">
			<o:tree value="#{treeBean.tree}" var="exampleEntity" varNode="node">
				<o:treeNode level="0">
					<o:treeNodeItem>
						<h4>#{node.index} #{exampleEntity.value}</h4>
						<o:treeInsertChildren />
					</o:treeNodeItem>
				</o:treeNode>
				<o:treeNode>
					<ul>
						<o:treeNodeItem>
							<li>
								#{node.index} #{exampleEntity.value}
								<o:treeInsertChildren />
							</li>
						</o:treeNodeItem>
					</ul>
				</o:treeNode>
			</o:tree>
		</h:panelGroup>

		<hr/>

		<h3>Editable tree</h3>
		<h:form id="form">
			<c:set var="saveButtonPressed" value="#{param['javax.faces.source'] == 'form:save'}" />
			<h:commandButton id="addNode" value="Add new node" action="#{treeBean.addChild(treeBean.tree)}">
				<f:ajax execute="@form" render="@form" />
			</h:commandButton>
			<o:tree id="tree" value="#{treeBean.tree}" var="exampleEntity" varNode="node">
				<o:treeNode>
					<ul>
						<o:treeNodeItem>
							<li>
								<h:inputText id="value" value="#{exampleEntity.value}" styleClass="treeinput"
									required="#{saveButtonPressed}" requiredMessage="Please enter value" />
								<h:commandButton id="addChild" value="Add new child" action="#{treeBean.addChild(node)}"
									rendered="#{node.level lt 10}">
									<f:ajax execute="@form" render="@form" />
								</h:commandButton>
								<h:commandButton id="remove" value="Remove node" action="#{treeBean.remove(node)}">
									<f:ajax execute="@form" render="@form" />
								</h:commandButton>
								<h:message for="value" />
								<o:treeInsertChildren />
							</li>
						</o:treeNodeItem>
					</ul>
				</o:treeNode>
			</o:tree>
			<h:commandButton id="save" value="Save" action="#{treeBean.save}">
				<f:ajax execute="@form" render="@form" />
			</h:commandButton> (only for this view scope ;) )
			<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
		</h:form>

		<h:outputScript>
			/**
			 * Force input elements to invoke "Save" button on enter key instead of one of those "add"/"remove" buttons.
			 * Additionally, focus the first empty input.
			 */
			function applyKeypressHandlerAndFocus() {
				$(".treeinput").on("keypress", function(event) {
					if (event.keyCode == 13) {
						$(this).closest("form").find("[id$=save]").click();
						return false;
					}
				}).filter("[value='']:first").focus();
			}
		</h:outputScript>
		<o:onloadScript>applyKeypressHandlerAndFocus();</o:onloadScript>
	</ui:define>
</ui:composition>